<template>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :append-to-body="true"
        :close-on-click-modal="false">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px"
            :disabled="dialogStatus == 'look'" style="width: 90%; margin-left:50px;">
            <el-row :gutter="40">
                <el-col :span="12">
                    <el-form-item label="表名" prop="tableName">
                        <el-input v-model="temp.tableName" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="表注释" prop="tableComment">
                        <el-input v-model="temp.tableComment" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属数据源" prop="sourceId">
                        <el-select v-model="temp.sourceId" placeholder="请选择所属数据源名称">
                            <el-option v-for="item, index in sourceData" :key="index" :label="item.sourceName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="关联逻辑模型" prop="logicalTableId">
                        <el-select v-model="temp.logicalTableId" class="filter-item" placeholder="请选择关联逻辑模型"
                            @change="choseModel">
                            <el-option v-for="item in modelList" :key="item.id" :label="item.tableName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <div class="filter-container">
            <el-button  class="filter-item" type="primary" icon="el-icon-edit" @click="addData">
              {{ $t('table.add') }}
            </el-button>
          </div> -->

            <el-table ref="table" :key="tableKey" :data="temp.columnModelEntities" border fit highlight-current-row
                style="width: 100%;" @selection-change="handleSelectionChange" max-height="400px">
                <!-- <el-table-column type="selection" width="55" /> -->
                <!-- <el-table-column type="selection" width="55" /> -->
                <el-table-column type="index" width="50" label="序号" align="center" />
                <el-table-column align="center" label="字段名称" min-width="150px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.columnName }}</span>
                        <!-- <el-input  v-model="scope.row.columnName" placeholder="请输入字段名称"></el-input> -->
                    </template>
                </el-table-column>
                <el-table-column align="center" label="字段注释" min-width="150px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.columnComment }}</span>
                        <!-- <el-input  v-model="scope.row.columnComment" placeholder="请输入字段注释"></el-input> -->
                    </template>
                </el-table-column>
                <el-table-column align="center" label="是否主键" min-width="150px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.columnKey | dictLabel('sf') }}</span>
                        <!-- <el-select v-model="scope.row.columnKey" class="filter-item" placeholder="请选择是否主键">
              <el-option v-for="item in dictList('sf')" :key="'type' + item.label" :label="item.label"
                :value="item.value" />
            </el-select> -->
                    </template>
                </el-table-column>
                <el-table-column align="center" label="是否为空" min-width="150px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.columnNullable | dictLabel('sf') }}</span>
                        <!-- <el-select v-model="scope.row.columnNullable" class="filter-item" placeholder="请选择是否为空">
              <el-option v-for="item in dictList('sf')" :key="'type' + item.label" :label="item.label"
                :value="item.value" />
            </el-select> -->
                    </template>
                </el-table-column>
                <el-table-column align="center" label="数据类型" min-width="150px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.dataType }}</span>
                        <!-- <el-select v-model="scope.row.dataType" class="filter-item" placeholder="请选择数据类型">
              <el-option v-for="item in dictList('create_table_type')" :key="'type' + item.label" :label="item.label"
                :value="item.value" />
            </el-select> -->
                    </template>
                </el-table-column>
                <el-table-column align="center" label="数据长度" min-width="150px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.dataLength }}</span>
                        <!-- <el-input  v-model="scope.row.dataLength" placeholder="请输入数据长度"></el-input> -->
                    </template>
                </el-table-column>
                <el-table-column align="center" label="数据精度" min-width="150px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.dataPrecision }}</span>
                        <!-- <el-input  v-model="scope.row.dataPrecision" placeholder="请输入数据精度"></el-input> -->
                    </template>
                </el-table-column>
                <!-- <el-table-column label="操作" align="center" min-width="100px" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button  type="text" size="small" class="delete-text-btn"
                  icon="el-icon-delete" @click="deleteData(scope.row,scope.$index)">
                  {{ $t('table.delete') }}
                </el-button>
              </template>
            </el-table-column> -->
            </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">
                {{ $t('table.cancel') }}
            </el-button>
            <el-button type="primary" :loading="loading"
                @click="dialogStatus === 'create' ? createData() : updateData()" v-if="dialogStatus != 'look'">
                {{ $t('table.confirm') }}
            </el-button>
        </div>

    </el-dialog>
</template>

<script>
import { fetchMedoleList } from '@/api/model/datamodel'
import { getSourceList } from '@/api/demo/metadataSource'
import { addModelData, getDetail, updateModel } from '@/api/model/datamodel'
export default {
    name: 'modelFrom',
    data() {
        return {
            rules: {
                tableName: [{ required: true, message: '表名称为必填项', trigger: 'blur' }],
                logicalTableId: [{ required: true, message: '关联逻辑模型为必填项', trigger: 'blur' }],
                sourceId: [{ required: true, message: '所属数据源为必填项', trigger: 'blur' }]
            },
            temp: {
                type: '1',
                tableName: '',
                tableComment: '',
                logicalTableId: '',
                sourceId: '',
                columnModelEntities: [],
                releaseStatus: '1'
            },
            treeList: [],
            treeProps: {
                value: 'id',
                label: 'name',
                expandTrigger: 'hover'
            },
            listQuery: {
                page: 1,
                limit: this.$store.getters.defaultPageSize,
                type: '0'
            },
            textMap: {
                update: '编辑',
                create: '新建',
                look: '查看'
            },
            tableKey: 1,
            loading: false,
            dialogFormVisible: false,
            dialogStatus: '',
            list: [],
            modelList: [],
            sourceData: []
        }
    },

    methods: {
        apifun() {
            getSourceList().then((res) => {
                if (res.data.code === 200) {
                    this.sourceData = res.data.data
                }
            })
            fetchMedoleList(this.listQuery).then(res => {
                if (res.data.code == 200) {
                    this.modelList = res.data.data.records
                } else {
                    this.$message.error(res.data.msg)
                }
            })
        },
        choseModel(val) {
            getDetail(val).then(res => {
                if (res.data.code == 200) {
                    res.data.data.columnModelEntities.forEach(item => {
                        item.id = ''
                    })
                    this.temp.columnModelEntities = res.data.data.columnModelEntities
                } else {
                    this.$message.error(res.data.msg)
                }
            })
        },
        handleUpdate(id) {
            this.resetTemp()
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
            getDetail(id).then(res => {
                console.log(res, '详情')
                this.temp = res.data.data
            })
        },

        addData() {
            this.temp.columnModelEntities.push({
                columnName: '',
                columnComment: '',
                columnKey: '',
                columnNullable: '',
                dataType: '',
                dataLength: '',
                dataPrecision: ''
            });
        },
        resetTemp() {
            this.loading = false
            this.temp = {
                type: '1',
                releaseStatus: '1',
                tableName: '',
                tableComment: '',
                sourceId: '',
                columnModelEntities: []
            }
            this.temp.columnModelEntities = []
        },
        deleteData(row, index) {
            this.temp.columnModelEntities.splice(index, 1);
        },
        handleCreate() {
            this.apifun()
            this.resetTemp()
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        createData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    this.loading = true
                    addModelData(this.temp).then(res => {
                        if (res.data.code == 0) {
                            this.$emit('resList')
                            this.dialogFormVisible = false
                            this.$message.success(res.data.msg)
                        } else {
                            this.$message.error(res.data.msg)
                        }
                        this.loading = true
                    })
                }
            })
        },


        updateData() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    updateModel(this.temp).then(res => {
                        if (res.data.code == 0) {
                            this.$emit('resList')
                            this.dialogFormVisible = false
                            this.$message.success(res.data.msg)
                        } else {
                            this.$message.error(res.data.msg)
                        }
                        this.loading = true
                    })
                }
            })
        },
        handleLook(id) {
            this.apifun()
            this.resetTemp()
            this.dialogStatus = 'look'
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
            getDetail(id).then(res => {
                console.log(res, '详情')
                this.temp = res.data.data
            })
        }
    }
}
</script>